<template>
  <div>
    <div class="search-bar">
      <van-row>
        <van-col class="location" span="3">
          <img :src="locationIcon" alt="">
        </van-col>
        <van-col span="16">
          <input type="text" class="search-input"/>
        </van-col>
        <van-col class="search-btn" span="5">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <div class="index-swipe">
      <van-swipe :autoplay="7000">
        <van-swipe-item v-for="(banner, index) in bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="type-bar">
      <div v-for="(cate,index) in category" :key="index" >
        <img v-lazy="cate.image" width="90%" />
        <span>{{cate.mallCategoryName}}</span>
      </div>
    </div>
    <!--AD banner area-->
    <div class="ad-banner">
      <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>
    <!--Recommend goods area-->
    <div class="recommend-area">
        <div class="recommend-title">
          商品推荐
        </div>
        <div class="recommend-body">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item, index) in recommendGoods" :key="index">
              <div class="recommend-item">
                <img :src="item.image">
                <div>{{item.goodsName}}</div>
                <div>￥{{item.price | moneyFilter}} (￥{{item.mallPrice | moneyFilter}})</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
    </div>
    <floor-component :floorData="floorOne" :floorTitle="floorName.floor1"></floor-component>
    <floor-component :floorData="floorTwo" :floorTitle="floorName.floor2"></floor-component>
    <floor-component :floorData="floorThree" :floorTitle="floorName.floor3"></floor-component>
    <!--Hot Area-->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
        <van-list>
          <van-row gutter="20">
            <van-col span="12" v-for="(item, index) in hotGoods" :key="index">
              <goods-info :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import floorComponent from '../component/floorComponent'
import testComponent from '../component/fllorTestComponent'
import { toMoney } from '@/filter/moneyFilter.js'
import goodsInfo from '../component/goodsInfoComponent'
import baseURL from '@/serviceAPI.config.js'
export default {
  name: 'Index',
  data () {
    return {
      locationIcon: require('../../assets/images/search-location.png'),
      bannerPicArray: [],
      category: {},
      adBanner: {},
      recommendGoods: {},
      floorOne: [],
      floorTwo: [],
      floorThree: [],
      floorOne_1: [],
      floorOne_2: [],
      floorOne_3: [],
      floorName: [],
      swiperOption: {
        slidesPerView: 2,
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: '5000'
        },
        on: {
          click: function (e) {
            console.log(e)
          }
        }
      },
      hotGoods: []
    }
  },
  components: {
    swiper,
    swiperSlide,
    floorComponent,
    testComponent,
    goodsInfo
  },
  created () {
    axios({
      url: baseURL.getIndex,
      method: 'get'
    }).then(response => {
      console.log(response)
      if (response.status === 200) {
        this.category = response.data.data.category
        this.adBanner = response.data.data.advertesPicture
        this.bannerPicArray = response.data.data.slides
        this.recommendGoods = response.data.data.recommend
        this.floorOne = response.data.data.floor1
        this.floorTwo = response.data.data.floor2
        this.floorThree = response.data.data.floor3
        this.floorOne_1 = this.floorOne[0]
        this.floorOne_2 = this.floorOne[1]
        this.floorOne_3 = this.floorOne[2]
        this.floorName = response.data.data.floorName
        this.hotGoods = response.data.data.hotGoods
        console.log(this.hotGoods)
      }
    }).catch(error => {
      console.log(error)
    })
  },
  filters: {
    moneyFilter (money) {
      return toMoney(money)
    }
  }
}
</script>

<style scoped>
.search-bar {
  height: 2.2rem;
  background-color: #e5017d;
  line-height:2.2rem;
}
.search-bar .location {
  text-align: center;
  font-size: 0;
}
.search-bar .location img {
  width: 0.8rem;
  height: 1.05rem;
  vertical-align: middle
}
.search-input{
  width:100%;
  height: 1.3rem;
  border-top:0px;
  border-left:0px;
  border-right:0px;
  border-bottom: 1px solid 1px !important ;
  background-color: #e5017d;
  color:#fff;
}
.location-icon{
  padding-top: .2rem;
  padding-left: .3rem;
}
.search-btn {
  text-align: center;
}
/* 轮播 */
.index-swipe {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 44.4444%;
  background: #f5f5f5;
  clear:both;
}
.index-swipe .van-swipe {
  position: static;
}
 .type-bar {
  background-color: #fff;
  margin:0 .3rem .3rem .3rem;
  border-radius: .3rem;
  font-size:14px;
  display: flex;
  flex-direction:row;
  flex-wrap:nowrap;
}
.type-bar div {
  padding: .5rem .3rem;
  font-size: 0.6316rem;
  text-align: center;
}
.type-bar div img {
  width: 3.1053rem;
  height: 3.1053rem;
}
.recommend-area{
  background-color: #fff;
  margin-top: .3rem;
}
.recommend-title{
  border-bottom:1px solid #eee;
  font-size:14px;
  padding:.2rem;
  color:#e5017d;
}
.recommend-body{
  border-bottom: 1px solid #eee;
}
.recommend-item{
  width:100%;
  border-right: 1px solid #eee;
  font-size: 12px;
  text-align: center;
  padding: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
}
.recommend-item img {
  width: 100%;
}
.hot-area{
  text-align: center;
  font-size:14px;
  height: 1.8rem;
  line-height:1.8rem;
}
</style>
